<template>
  <n-space vertical style="margin-top: 10px">
    <div>
      <div class="switch-dark">
        <span>语言</span>
        <n-select
          style="width: 140px"
          v-model:value="currentLocale"
          :options="localOptions"
          @update:value="handleUpdateValue"
        />
      </div>
    </div>

    <div>
      <div class="switch-dark">
        <span>水印</span>
        <n-switch
          v-model:value="commonVar.watermark"
          @update:value="handleWatermark"
        >
          <template #checked-icon>
            <n-icon :component="ArrowForwardOutline" />
          </template>
          <template #unchecked-icon>
            <n-icon :component="ArrowBackOutline" />
          </template>
        </n-switch>
      </div>
    </div>
  </n-space>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useThemeStore } from "@/stores/models/theme";
import { dateZhCN, zhCN } from "naive-ui";
import { ArrowBackOutline, ArrowForwardOutline } from "@vicons/ionicons5";

onMounted(() => {});
const currentLocale = computed(() => (commonVar.locale === null ? "en" : "cn"));
const themeStore = useThemeStore();
const commonVar = themeStore.commonVar;
const localOptions = [
  {
    label: "简体中文",
    value: "cn",
  },
  {
    label: "English",
    value: "en",
  },
];
const handleUpdateValue = (value) => {
  if (value === "en") {
    commonVar.locale = null;
    commonVar.dateLocale = null;
  } else {
    commonVar.locale = zhCN;
    commonVar.dateLocale = dateZhCN;
  }
};

const handleWatermark = (value) => {
  commonVar.watermark = value;
};
</script>
<style scoped lang='scss'>
.switch-dark {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 5px;
  border-radius: v-bind(borderRadius);
  color: v-bind(textColorBase);
}
.switch-dark:hover {
  background-color: v-bind(dividerColor);
}
</style>